<div class="templateMailings">

	<div class="widget widgetTree asideLeft treeMailings">
		<div class="widgetContent">
			<div class="elementHeader">
				<p>Mailings</p>
				<span class="loading"></span>
			</div>
			<div class="elementMenu">
				<!--<span class="btnIco folderAdd cp"></span>-->
				<span class="btnIco emailAdd"></span>
				<span class="btnIco arrowRefreshSmall"></span>
				<span class="btnIco delete"></span>
			</div>
			<div class="elementContent">
				<!-- tree content -->
			</div>
		</div>
	</div>

	<div class="widget widgetPortlet">
		<div class="column">
			<div class="portlet" id="mailingDetails">
				<div class="elementHeader">Details<span class="icons"><span class="arrow arrowUp cp"></span></span></div>
				<div class="elementContent">
					<form>
						<fieldset>
							<input type="hidden" name="id_node" />
							<section><label>Name:</label> <input name="name" type="text" value="" required="true" /></section>
							<section><label>Sender email:</label> <input name="sender_email" type="email" value="" required="true" /></section>
							<section><label>Sender name:</label> <input name="sender_name" type="text" value="" required="true" /></section>
							<section><label>Title:</label> <input name="email_title" type="text" value="" required="true" /></section>
							<section><label>Created date:</label> <input name="date_create" type="text" value="" disabled="disabled" /></section>
							<input type="submit" value="Save" />
						</fieldset>
					</form>
				</div>
			</div>

			<div class="portlet" id="mailingContent">
				<div class="elementHeader">Content<span class="icons"><span class="arrow arrowUp cp"></span></span></div>
				<div class="elementContent">
					<div id="email_content" class="mb10"></div>
					<div id="email_editor" class="mb10"></div>
					<span class="btn">Edit</span>
				</div>
			</div>
			
			<div class="portlet widgetFile" id="mailingContent">
				<div class="elementHeader">Graphics<span class="icons"><span class="arrow arrowUp cp"></span></span></div>
				<div class="elementContent">
					<div class="fileupload">
						<form method="post" enctype="multipart/form-data" action="index.php/mailings/uploadFiles">
							<input type="hidden" value="" name="idNode" />
							<div class="fileupload-buttonbar">
								<label class="fileinput-button">
									<span>Add files...</span>
									<input type="file" name="files[]" multiple>
								</label>
								<button type="submit" class="start">Start upload</button>
								<button type="reset" class="cancel">Cancel upload</button>
								<button type="button" class="delete">Delete files</button>
							</div>
							<div class="fileupload-content">
								<table class="files"></table>
								<div class="fileupload-progressbar"></div>
							</div>
						</form>
					</div>
					
					<script id="template-upload" type="text/x-jquery-tmpl">
						<tr class="template-upload{{if error}} ui-state-error{{/if}}">
							<td class="preview"></td>
							<td class="name">${name}</td>
							<td class="size">${sizef}</td>
							{{if error}}
								<td class="error" colspan="2">Error:
									{{if error === 'maxFileSize'}}File is too big
									{{else error === 'minFileSize'}}File is too small
									{{else error === 'acceptFileTypes'}}Filetype not allowed
									{{else error === 'maxNumberOfFiles'}}Max number of files exceeded
									{{else}}${error}
									{{/if}}
								</td>
							{{else}}
								<td class="progress"><div></div></td>
								<td class="start"><button>Start</button></td>
							{{/if}}
							<td class="cancel"><button>Cancel</button></td>
						</tr>
					</script>
					<script id="template-download" type="text/x-jquery-tmpl">
						<tr class="template-download{{if error}} ui-state-error{{/if}}">
							{{if error}}
								<td></td>
								<td class="name">${name}</td>
								<td class="size">${sizef}</td>
								<td class="error" colspan="2">Error:
									{{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
									{{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
									{{else error === 3}}File was only partially uploaded
									{{else error === 4}}No File was uploaded
									{{else error === 5}}Missing a temporary folder
									{{else error === 6}}Failed to write file to disk
									{{else error === 7}}File upload stopped by extension
									{{else error === 'maxFileSize'}}File is too big
									{{else error === 'minFileSize'}}File is too small
									{{else error === 'acceptFileTypes'}}Filetype not allowed
									{{else error === 'maxNumberOfFiles'}}Max number of files exceeded
									{{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
									{{else error === 'emptyResult'}}Empty file upload result
									{{else}}${error}
									{{/if}}
								</td>
							{{else}}
								<td class="preview">
									{{if thumbnail_url}}
										<a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
									{{/if}}
								</td>
								<td class="name">
									<a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
								</td>
								<td class="size">${sizef}</td>
								<td colspan="2"></td>
							{{/if}}
							<td class="delete">
								<button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
							</td>
						</tr>
					</script>

				</div>
			</div>

			<div class="portlet" id="mailingTestMailing">
				<div class="elementHeader">Test mailing<span class="icons"><span class="arrow arrowUp cp"></span></span></div>
				<div class="elementContent">
					<form>
						<fieldset>
							<section><label>Test recipients:</label><textarea name="recipients" data-autogrow="true" required="true"></textarea></section>
							<input type="submit" value="Send" />
						</fieldset>
					</form>
				</div>
			</div>

			<!--
			<div class="portlet" id="mailingStatistics">
				<div class="elementHeader">Statistics<span class="icons"><span class="arrow arrowUp cp"></span></span></div>
				<div class="elementContent">Content</div>
			</div>
			-->

			<div class="portlet widgetGrid" id="mailingRecipients">
				<div class="elementHeader">Recipients<span class="numbers"></span><span class="icons"><span class="arrow arrowUp cp"></span></span></div>
				<div class="elementContent">
					<!-- grid content -->
				</div>
			</div>

			<div class="portlet br7" id="mailingAddRecipients">
				<div class="elementHeader">Add recipients from CSV<span class="icons"><span class="arrow arrowUp cp"></span></span></div>
				<div class="elementContent">
					<div class="elementContentBox">
						<form>
							<fieldset>
								<section><label>CVS file content:</label><textarea name="recipients" required="true"></textarea></section>
								<input type="submit" value="Save" />
							</fieldset>
						</form>
					</div>
				</div>
			</div>
			
			<div class="portlet" id="mailingActions">
				<div class="elementHeader">Actions<span class="icons"><span class="arrow arrowUp cp"></span></span></div>
				<div class="elementContent">
					<span class="btn sendMailing">Send mailing to all recipients</span>
				</div>
			</div>
		</div>

	</div>

	<div class="clr"></div>

</div>

<script type="text/javascript" src="<?php echo base_url();?>qlsolution/js/jquery.autogrowtextarea.js"></script>
<script type="text/javascript">
	$('[data-autogrow]').autoGrow();
</script>

<script type="text/javascript" src="qlsolution/app/mailings/controller.js"></script>